<template>
	<view class="page">
		<!-- 顶部项目信息 -->
		<view class="top_info">
			<view class="project_name">
				{{project}}
			</view>
			<view class="date_info">
				<image style="width: 36rpx;margin-right: 14rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u800.svg" mode="widthFix"></image>
				<view class="date_text">
					{{currentDate.getFullYear()}}年{{(currentDate.getMonth() + 1).toString().padStart(2, '0')}}月
				</view>
			</view>
		</view>
		<!-- 日期切换信息 -->
		<view class="date_tab">
			<view class="scroll_date">
				<view class="date_box" :class="{active:dateTab==index}" v-for="(date,index) in datelists" :key="index" @click="dateSelect(index)" :style="date_list[index].childrens==0?'color:#AAAAAA':''">
					<view class="week">
						{{date.weekDay}}
					</view>
					<view class="today">
						{{date.isToday?'今日':date.day}}
					</view>
				</view>
			</view>
			<view class="right_board">
				
			</view>
		</view>
		<!-- 空内容面板 -->
		<image class="empty" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u875.png" mode="widthFix" v-if="date_list[dateTab].childrens.length==0"></image>
		<!-- 动态面板 -->
		<view class="dynamic_Panel" v-if="date_list[dateTab].childrens.length!=0">
			<view class="panel_title">
				请选择检查诊室
			</view>
			<view class="consult_rooms">
				<view class="consult_room" :class="{consult_active:consultTab==n}" v-for="(consult,n) in date_list[dateTab].childrens" :key="n" @click="consultSelect(n)">
					{{consult.consult}}
				</view>
			</view>
			<view class="panel_title">
				请选择适合您的预约时间段
			</view>
			<view class="idle_box">
				<view class="idle" v-for="(idle,i) in date_list[dateTab].childrens[consultTab].idle" :key="i" @click="select_time(i)">
					<view class="time_slot">
						{{idle.time_slot}}
					</view>
					<view class="remain" :style="idle.remain==0?'color:#AAAAAA':''">
						余{{idle.remain}}
					</view>
				</view>
			</view>
			<!-- 号源不足消息提示 -->
			<uni-popup ref="message" type="message" mask-background-color="rgba(255,255,255,0)">
				<uni-popup-message type="error" message="改时间段已约满,请选择其他时间" :duration="2000"></uni-popup-message>
			</uni-popup>
			<!-- 确认预约弹出窗 -->
			<uni-popup ref="popup" class="popup" type="bottom" background-color="#fff">
				<view class="popup-content">
					<!-- 底部弹出 Popup -->
					<image class="closeBtn" @click="closeBtn" src="https://cdn8.axureshop.com/demo/2208121/images/%E9%A2%84%E7%BA%A6%E6%97%B6%E9%97%B4/u3103.svg" mode="widthFix"></image>
					<view class="title">
						确认预约
					</view>
					<view class="popupLists">
						<view class="popuplist">
							<view class="popup_title">
								就诊患者
							</view>
							<view class="popup_content">
								{{patient}}
							</view>
						</view>
						<view class="popuplist">
							<view class="popup_title">
								检查项目
							</view>
							<view class="popup_content">
								{{project}}
							</view>
						</view>
						<view class="popuplist">
							<view class="popup_title">
								检查诊室
							</view>
							<view class="popup_content">
								{{appointment_consult}}
							</view>
						</view>
						<view class="popuplist">
							<view class="popup_title">
								预约时间
							</view>
							<view class="popup_content" style="font-weight: 700;">
								{{appointment_date}} {{appointment_time}}
							</view>
						</view>
						
						<button class="confirmBtn" @click="confirm">确  认</button>
					</view>
					
					
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { getWeekDates } from '../../src/utils/date.js'
import { onLoad } from '@dcloudio/uni-app'
import api from '../../src/utils/api.js'
	const project = ref('')
	const patientInfo = ref(0)
	const patient = ref('')
	onLoad((option)=>{
		console.log(option)
		patientInfo.value = option.register_id
		api('/pendingappointmentlist',{
			id:option.register_id
		}).then(res=>{
			project.value = res.dataes[0].test_item
			patient.value = res.dataes[0].patient
		}).catch(err=>{
			console.log(err)
		})
	})
	const currentDate = new Date();			//当前日期
	const datelists = getWeekDates()
	// 日期选择信息
	const date_list = reactive([
		{
			week:'周一',
			date:'今日',
			childrens:[
				{
					consult:'CT诊室一',
					idle:[
						{
							time_slot:'08:30-09:30',
							remain:10
						},
						{
							time_slot:'09:30-10:30',
							remain:0
						},
						{
							time_slot:'10:30-11:30',
							remain:5
						},
						{
							time_slot:'14:30-15:30',
							remain:6
						},
						{
							time_slot:'15:30-16:30',
							remain:8
						},
						{
							time_slot:'16:30-17:30',
							remain:10
						}
					]
				},
				{
					consult:'CT诊室二',
					idle:[
						{
							time_slot:'08:30-09:30',
							remain:10
						},
						{
							time_slot:'09:30-10:30',
							remain:10
						},
						{
							time_slot:'10:30-11:30',
							remain:0
						},
						{
							time_slot:'14:30-15:30',
							remain:8
						},
					]
				}
			]
		},
		{
			week:'周二',
			date:'29',
			childrens:[
				{
					consult:'CT诊室一',
					idle:[
						{
							time_slot:'08:30-09:30',
							remain:10
						},
						{
							time_slot:'09:30-10:30',
							remain:0
						},
						{
							time_slot:'10:30-11:30',
							remain:5
						},
						{
							time_slot:'14:30-15:30',
							remain:6
						},
						{
							time_slot:'15:30-16:30',
							remain:8
						},
						{
							time_slot:'16:30-17:30',
							remain:10
						}
					]
				},
				{
					consult:'CT诊室二',
					idle:[
						{
							time_slot:'08:30-09:30',
							remain:10
						},
						{
							time_slot:'09:30-10:30',
							remain:10
						},
						{
							time_slot:'10:30-11:30',
							remain:0
						},
						{
							time_slot:'14:30-15:30',
							remain:8
						},
					]
				}
			]
		},
		{
			week:'周三',
			date:'30',
			childrens:[
				{
					consult:'CT诊室一',
					idle:[
						{
							time_slot:'08:30-09:30',
							remain:10
						},
						{
							time_slot:'09:30-10:30',
							remain:0
						},
						{
							time_slot:'10:30-11:30',
							remain:5
						},
						{
							time_slot:'14:30-15:30',
							remain:6
						},
						{
							time_slot:'15:30-16:30',
							remain:8
						},
						{
							time_slot:'16:30-17:30',
							remain:10
						}
					]
				},
				{
					consult:'CT诊室二',
					idle:[
						{
							time_slot:'08:30-09:30',
							remain:10
						},
						{
							time_slot:'09:30-10:30',
							remain:10
						},
						{
							time_slot:'10:30-11:30',
							remain:0
						},
						{
							time_slot:'14:30-15:30',
							remain:8
						},
					]
				}
			]
		},
		{
			week:'周四',
			date:'31',
			childrens:[]
		},
		{
			week:'周五',
			date:'1',
			childrens:[]
		},
		{
			week:'周六',
			date:'2',
			childrens:[]
		},
		{
			week:'周日',
			date:'3',
			childrens:[
				{
					consult:'CT诊室一',
					idle:[
						{
							time_slot:'08:30-09:30',
							remain:10
						},
						{
							time_slot:'09:30-10:30',
							remain:0
						},
						{
							time_slot:'10:30-11:30',
							remain:5
						},
						{
							time_slot:'14:30-15:30',
							remain:6
						},
						{
							time_slot:'15:30-16:30',
							remain:8
						},
						{
							time_slot:'16:30-17:30',
							remain:10
						}
					]
				},
				{
					consult:'CT诊室二',
					idle:[
						{
							time_slot:'08:30-09:30',
							remain:10
						},
						{
							time_slot:'09:30-10:30',
							remain:10
						},
						{
							time_slot:'10:30-11:30',
							remain:0
						},
						{
							time_slot:'14:30-15:30',
							remain:8
						},
					]
				}
			]
		}
	])
	// 日期点击选择
	const dateTab = ref(0)
	const appointment_date = ref(datelists[0].year+'-'+(datelists[0].month<10?'0'+datelists[0].month:datelists[0].month)+'-'+(datelists[0].day<10?'0'+datelists[0].day:datelists[0].day))
	const dateSelect = (index) => {
		dateTab.value=index
		consultTab.value=0
		appointment_date.value = datelists[index].year+'-'+(datelists[index].month<10?'0'+datelists[index].month:datelists[index].month)+'-'+(datelists[index].day<10?'0'+datelists[index].day:datelists[index].day)	//所选日期
	}
	// 诊室点击选择
	const consultTab = ref(0)
	const appointment_consult = ref('CT诊室一')
	const consultSelect = (n) => {
		consultTab.value=n
		appointment_consult.value = date_list[dateTab.value].childrens[n].consult	//所选科室
	}
	// 确认预约弹出层
	const popup = ref(null)
	const message = ref(null)
	const appointment_time = ref('')
	const select_time = (i) => {
		if(date_list[dateTab.value].childrens[consultTab.value].idle[i].remain){
			popup.value.open()
			console.log(date_list[dateTab.value].childrens[consultTab.value].idle[i].time_slot)
			appointment_time.value = date_list[dateTab.value].childrens[consultTab.value].idle[i].time_slot
		}else{
			message.value.open()
			setTimeout(()=>{
				message.value.close()
			},2000)
		}
		
	}
	const closeBtn = () => {
		popup.value.close()
	}
	// 确认
	const confirm = () => {
		api('/pendingappointmentupdate',{
			register_id:patientInfo.value,
			consult:appointment_consult.value,
			time:appointment_date.value+' '+appointment_time.value,
			status:'待检查'
		},'POST').then(res=>{
			console.log(res)
			if(res.state==200){
				uni.navigateTo({
					url:'/pages/Project_Appointment/Project_Appointment'
				})
			}
		}).catch(err=>{
			console.log(err)
		})
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #fff;
		.top_info{
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
			font-weight: 700;
			color: #000;
			font-size: 28rpx;
			.date_info{
				height: 40rpx;
				display: flex;
				align-items: center;
			}
		}
		// 日期切换信息
		.date_tab{
			width: 100%;
			height: 148rpx;
			background-color: #fff;
			box-shadow: 0rpx 0rpx 16rpx rgba(242, 242, 242, 1);
			position: relative;
			padding-left: 30rpx;
			padding-right: 36rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.scroll_date{
				height: 94rpx;
				display: flex;
				align-items: center;
				overflow: auto;
				.date_box{
					flex: 0 0 116rpx;
					width: 116rpx;
					height: 94rpx;
					display: flex;
					flex-direction: column;
					align-items: center;	
					justify-content: center;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #13C2C2;
					background-color: #fff;
					border-radius: 10rpx;
					.week,.today{
						line-height: 40rpx;
					}
					.today{
						font-size: 24rpx;
					}
				}
				.active{
					background-color: rgba(22, 119, 255, 1);
					color: #fff !important;
				}
			}
			.right_board{
				position: absolute;
				right: 0;
				top: 0;
				z-index: 99;
				width: 36rpx;
				height: 146rpx;
				background-color: #fff;
				box-shadow: -4rpx 0rpx 10rpx rgba(242, 242, 242, 0.952941176470588);
			}
			
		}
		// 空面板信息
		.empty{
			width: 600rpx;
			margin: 100rpx auto;
			display: block;
		}
		// 动态面板
		.dynamic_Panel{
			margin-top: 30rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			.panel_title{
				font-family: 'Microsoft YaHei UI', sans-serif;
				color: #7F7F7F;
				font-size: 28rpx;
				margin-bottom: 38rpx;
			}
			// 诊室
			.consult_rooms{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				margin-bottom: 58rpx;
				.consult_room{
					width: 320rpx;
					height: 96rpx;
					line-height: 96rpx;
					border: 2rpx solid rgba(215, 215, 215, 1);
					border-radius: 16rpx;
					box-sizing: border-box;
					text-align: center;
					font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
					font-weight: 700;
					font-size: 28rpx;
				}
				.consult_active{
					background-color: rgba(230, 244, 255, 1);
					border-color: rgba(230, 244, 255, 1);
					color: #1677FF;
				}
			}
			// 可预约区域
			.idle_box{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;
				.idle{
					width: 320rpx;
					height: 148rpx;
					border: 2rpx solid rgba(215, 215, 215, 1);
					border-radius: 16rpx;
					margin-bottom: 30rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.time_slot{
						font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						color: #000;
						font-weight: 700;
					}
					.remain{
						font-family: 'Microsoft YaHei UI', sans-serif;
						color: #13C2C2;
						font-size: 28rpx;
						margin-top: 14rpx;
					}
				}
			}
			// 确认预约弹出窗
			.popup{
				.popup-content{
					height: 538rpx;
					padding: 32rpx 26rpx 32rpx 60rpx;
					box-sizing: border-box;
					background-color: #fff;
					position: relative;
					.closeBtn{
						width: 36rpx;
						position: absolute;
						top: 32rpx;
						right: 26rpx;
					}
					.title{
						width: 100%;
						height: 40rpx;
						font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						color: #000;
						font-weight: 700;
						text-align: center;
					}
					.popupLists{
						margin-top: 54rpx;
						width: 100%;
						padding-right: 20rpx;
						box-sizing: border-box;
						.popuplist{
							width: 100%;
							height: 40rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							margin-bottom: 26rpx;
							.popup_title{
								color: #7F7F7F;
							}
						}
						.confirmBtn{
							width: 100%;
							height: 80rpx;
							line-height: 80rpx;
							background-color: rgba(22, 119, 255, 1);
							border-radius: 16rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							color: #fff;
							margin-top: 44rpx;
						}
					}
					
				}
			}
		}
	}       
</style>
